<template>
  <view class="success-page">
    <!-- 成功图标 -->
    <view class="success-icon">
      <view class="icon-circle"></view>
      <view class="icon-check"></view>
    </view>

    <!-- 提示文字 -->
    <view class="success-text">
      <text class="title">提交成功</text>
      <text class="subtitle">等待平台审核</text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-btn">
      <button @click="goToHome">返回首页</button>
    </view>
  </view>
</template>

<script setup>
		import {
			defineProps,
			defineEmits
		} from 'vue';
const goToHome = () => {
  // 实际项目中替换为具体跳转逻辑
  uni.switchTab({
    url: '/pages/index/index'
  });
};
</script>

<style lang="scss">
.success-page {
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;

  .success-icon {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 60rpx;

    .icon-circle {
      width: 100%;
      height: 100%;
      background: #4CAF50;
      border-radius: 50%;
      animation: scaleIn 0.6s ease-out;
    }

    .icon-check {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 80rpx;
      height: 40rpx;
      border-left: 8rpx solid #fff;
      border-bottom: 8rpx solid #fff;
      transform: translate(-50%, -60%) rotate(-45deg);
    }
  }

  .success-text {
    text-align: center;
    .title {
      display: block;
      font-size: 40rpx;
      color: #333;
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .subtitle {
      font-size: 28rpx;
      color: #666;
    }
  }

  .action-btn {
    position: fixed;
    bottom: 80rpx;
    width: 80%;
    button {
      background: #2979FF;
      color: white;
      border-radius: 48rpx;
      font-size: 32rpx;
      height: 88rpx;
      line-height: 88rpx;
    }
  }

  @keyframes scaleIn {
    0% {
      transform: scale(0);
    }
    60% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
}
</style>